<template>
  <SearchBar @search="onSearch" />
  <el-row>
    <el-col :span="2">
      <el-button size="small" type="warning" @click="router.push('/itemAdd')"
        >单个添加</el-button
      >
    </el-col>
    <el-col :span="2">
      <el-upload action="#" :before-upload="addItems" accept=".xlsx, .xls">
        <el-button size="small" type="danger">批量添加</el-button>
      </el-upload>
    </el-col>
    <el-col :span="2">
      <a href="javascript:;" @click="exportFile">导出模板</a>
    </el-col>
  </el-row>
  <el-table :data="items" style="height: 500px">
    <el-table-column prop="itemName" label="商品名" />
    <el-table-column prop="itemPrice" label="商品价格">
      <template #default="{ row }">
        <el-tag>{{ row.itemPrice }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="itemDesc" label="商品描述">
      <template #default="{ row }">
        <el-tooltip placement="bottom">
          <template #content>
            <div style="width: 500px">
              {{ row.itemDesc }}
            </div>
          </template>
          <span>{{ row.itemDesc.substr(0, 15) + "..." }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="itemSellCount" label="销量">
      <template #default="{ row }">
        <el-tag :color="row.itemSellCount > 500 ? 'red' : 'green'">{{
          row.itemSellCount
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="itemStatus" label="上下架">
      <template #default="{ row }">
        <el-switch
          v-model="row.itemStatus"
          :active-value="0"
          :inactive-value="1"
          active-text="上架"
          inactive-text="下架"
          inline-prompt
          @change="changeItemStatus(row.id, row.cateStatus)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="itemImg" label="封面">
      <template #default="{ row }">
        <el-image
          style="width: 50px; height: 50px"
          :src="row.itemImg"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="row.itemImgs.map((item:any) => item.url)"
          :initial-index="4"
          preview-teleported
          fit="cover"
        />
      </template>
    </el-table-column>
    <el-table-column prop="itemCreateTime" label="上架时间" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="primary" size="small" :icon="Edit"></el-button>
        <el-button type="danger" size="small" :icon="Delete"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    layout="prev, pager, next, jump, sizes"
    :total="total"
    v-model:page-size="pageSize"
    v-model:current-page="page"
  />
</template>

<script setup lang="ts">
import type { Item } from "@/types/item";
import { ref, onMounted, watch } from "vue";
import { getItems } from "@/api/item";
import { Edit, Delete } from "@element-plus/icons-vue";
import SearchBar from "@/components/SearchBar.vue";
import { utils, writeFileXLSX, read } from "xlsx";
import { useRouter } from "vue-router";
const router = useRouter();
// 导入excel批量添加商品
const addItems = (file: any) => {
  const fd = new FileReader();
  // 将excel转换成 arrayBuffer
  fd.readAsArrayBuffer(file);

  fd.onload = () => {
    const wb = read(fd.result);
    const ws = wb.Sheets[wb.SheetNames[0]];
    const data = utils.sheet_to_json(ws);
    console.log(data);
    const itemLists = data.map((item: any) => ({
      itemName: item.商品名,
      itemPrice: item.商品价格,
      itemDesc: item.商品描述,
    }));
    console.log(itemLists);
    // 请求批量上传接口 传入 这个 数据
  };
  return false;
};
// 导出批量添加商品excel模板
const exportFile = () => {
  const data = [
    {
      商品名: "商品1",
      商品价格: 18,
      商品描述: "商品描述1",
    },
  ];
  const ws = utils.json_to_sheet(data);
  /* create workbook and append worksheet */
  const wb = utils.book_new();
  utils.book_append_sheet(wb, ws, "Data");
  /* export to XLSX */
  writeFileXLSX(wb, "商品.xlsx");
};

// 商品列表数据处理
const items = ref<Item[]>();
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
let searchParams = {};
// 分页请求
watch([page, pageSize], () => {
  fetchItems();
});
// 点击修改
const onSearch = (_searchParams = {}) => {
  searchParams = _searchParams;
  page.value = 1;
  pageSize.value = 10;
  fetchItems();
};
const fetchItems = () => {
  getItems({
    ...searchParams,
    page: page.value,
    pageSize: pageSize.value,
  }).then((res: any) => {
    if (res.code === 200) {
      items.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
// 商品列表数据处理结束

// 行内修改商品上下架状态
const changeItemStatus = (id: number, itemStatus: number) => {
  console.log(id, itemStatus);
};
onMounted(() => {
  fetchItems();
});

defineOptions({
  name: "ItemLists",
});
</script>

<style scoped></style>
